<template>
  <div class="c-fc-gray c-fs24">
    <edu-calendar v-if="isShowSelect" :dateMasksList="dateMasksList" @getSelectDate="getSelectDate" @getScheduleDate="getScheduleDate" :class="$unenableTopNav() ? 'c-p-t0' : 'c-p-t68'" class="c-pf c-w100 c-bg-white c-pz99"></edu-calendar>
    <div class="c-pt180">
      <schedule-item :scheduleList="tableList" :faceType="0"></schedule-item>
    </div>
    <loading-status-tem :noDataText="'暂无记录'" :dataStatus="dataStatus"></loading-status-tem>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import EduCalendar from "@/components/templates/edu/eduCalendar.vue";
import scheduleItem from "@/components/templates/edu/scheduleItem.vue";
let pageIndex = 1;
let LIMIT = 10;
/* eslint-disable */
let studentId = "";
export default {
  name: 'CourseTable',
  components: {
    loadingStatusTem,
    EduCalendar,
    scheduleItem
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      arrowStatus: false,
      currentYears: '',
      currentMonths: '',
      dataStatus: 'HAS_MORE_DATA',
      tableList: [],
      primaryAddress: ['全部校区'],
      studentList: [],
      addressList: [['']],
      address: "",
      fromType: 1, //0 从预约上课来 1从查看课表来
      dateMasksList: [], // 打点日期
      saleCourseId: '', //面授课程id
      orderId: "",
      reservationStatus: false, // 预约请求状态，防止请求未结束再次请求
      cid: '', // 课程id
      isShowSelect: false, // 是否显示日历、地点这些选择，为了优化无权查看的跳转交互
      startTime: '', // 筛选时间，开始
      endTime: '', // 筛选时间，结束
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  watch: {
  },
  methods: {
    // 获取选中的时间范围
    getSelectDate(item) {
      if (item) {
        pageIndex = 1;
        this.tableList = [];
        this.startTime = item.startTime;
        this.endTime = item.endTime;
        this.currentYears = this.startTime.split('-')[0];
        this.currentMonths = Number(this.startTime.split('-')[1]);
        this.getScheduleDate(this.startTime);
        this.getAddress();
        this.getAppointmentCourse();
      }
    },
    // 获取当前选中月份,以及上下两个月有课程的日期列表
    getScheduleDate(startTime) {
      let $this = this;
      let startYears = Number(startTime.split('-')[0])
      let startMonth = Number(startTime.split('-')[1])
      let startDate = startMonth > 1 ? (startYears + '-' + ((startMonth - 1) >= 10 ? (startMonth - 1) : ('0' + (startMonth - 1))) + '-01') : ((startYears - 1) + '-12-01');
      let endDate = startMonth < 12 ? (startYears + '-' + ((startMonth + 1) >= 10 ? (startMonth + 1) : ('0' + (startMonth + 1))) + '-' + utilJs.getMonthDays(startYears, startMonth + 1)) : ((startYears + 1) + '-01-31');
      let url = 'educationSystem/schedule/course';
      utilJs.getMethod(global.apiurl + url + '?selectType=2' + '&startDate=' + startDate + '&endDate=' + endDate + '&studentCourseId=' + this.orderId + "&limit=93", res => {
        this.dateMasksList = [];
        if (res.data.length > 0) {
          res.data.forEach((item, index) => {
            $this.dateMasksList.push({
              year: Number(item.startDate.split('-')[0]),
              month: Number(item.startDate.split('-')[1]),
              date: Number(item.startDate.split('-')[2]),
            })
          })
        }
      }, failRes => {
        this.$routerGo(this, "replace", {
          path: "/edu/faceTeaching"
        });
      })
    },
    //判断时间大小
    getTimeMM(str) {
      let stime = utilJs.getTimeByDate(str);
      let nowTime = (new Date()).getTime();
      return stime > nowTime ? true : false;
    },
    getAppointmentCourse() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      studentId = this.$route.query.studentId;
      this.dataStatus = 'LOADING';
      this.address = this.address == "全部校区" ? "" : this.address;
      utilJs.getMethod(global.apiurl + "educationSystem/schedule/course?page=" + pageIndex + '&limit=' + LIMIT + '&startDate=' + this.startTime + '&endDate=' + this.endTime + '&studentCourseId=' + this.orderId, res => {
        this.isShowSelect = true;
        if (pageIndex == 1) {
          this.tableList = res.data;
        } else {
          this.tableList = [...this.tableList, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
        this.wechatShare();
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
        this.isShowSelect = false;
        if (failRes.data.msg == '您与学员已解绑，现无权访问!') {
          if (this.saleCourseId != '') {
            this.$routerGo(this, "replace", {
              path: "/edu/eduDetail",
              query: { id: this.saleCourseId }
            });
          } else {
            this.$routerGo(this, "replace", {
              path: "/edu/eduList"
            });
          }
        } else {
          this.$routerGo(this, "replace", {
            path: "/edu/faceTeaching"
          });
        }
      })
    },
    changeAddress(val) {
      this.address = val.toString();
      pageIndex = 1;
      this.tableList = [];
      this.getAppointmentCourse();
    },
    getAddress() {
      utilJs.getMethod(global.apiurl + "educationSystem/schedule/address?date=" + this.startTime + '&endDate=' + this.endTime + '&type=1' + "&courseId=" + this.cid + '&saleCourseId=' + this.saleCourseId + "&id=" + this.orderId, res => {
        if (res.length) {
          this.addressList = [res];
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = '查看课表';
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/faceTeaching?faceType=1&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = '查看课表';
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/faceTeaching?faceType=1&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.tableList.length > 0) {
          this.getAppointmentCourse();
        }
      });
    },
  },
  activated() {
    window.scrollTo(0, 0);
    studentId = this.$route.query.studentId ? this.$route.query.studentId : '';
    this.cid = this.$route.query.cid ? this.$route.query.cid : '';
    // this.fromType = this.$route.query.comeFrom || 1; 跟产品确认好了，预约上课不在这个页面展示，相关信息删除
    this.saleCourseId = this.$route.query.saleCourseId ? this.$route.query.saleCourseId : '';
    this.orderId = this.$route.query.scid ? this.$route.query.scid : '';
    setDocumentTitle("课程课表");
    this.isShowSelect = false;
    this.dataStatus = 'HAS_MORE_DATA';
    pageIndex = 1;
    this.arrowStatus = false;
    this.currentYears = new Date().getFullYear();
    this.currentMonths = new Date().getMonth() + 1;
    this.reservationStatus = false;
    this.address = "";
    this.tableList = [];
    this.studentList = [];
    this.addressList = [];
    this.primaryAddress = ['全部校区'];
    this.startTime = utilJs.getNowTimeFormat('YYYY-MM-DD');
    this.endTime = this.startTime;
    this.getScheduleDate(this.startTime);
    this.getAddress();
    this.getAppointmentCourse();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.center {
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
.selectAddress >>> .weui-cell__ft {
  padding: 0 !important;
}
.selectAddress >>> .weui-cell {
  padding: 0 !important;
}
.selectAddress >>> .weui-cell__ft:after {
  display: none !important;
}
</style>
